<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./static/dependence/unpkg/roughviz.js"></script>
    <link rel="stylesheet" href="./static/dependence/loginAndRegister/css/diquick.css">
    <link rel="stylesheet" href="./static/index/css/data.css">
    <script src="./static/dependence/vue/vue.js"></script>
    <script src="./static/dependence/reqwest/reqwest.js"></script>
    <script src="./static/dependence/loginAndRegister/js/diquick.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="static/dependence/layDate-v5.0.9/layDate-v5.0.9/laydate/laydate.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="static/dependence/bootstrap/min.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./static/dependence/bootstrap/min.js"></script>
    <title>Data</title>
</head>
<body>
<div id="app">
    <div>
        <div class="row">
            <div class="col-md-11"></div>
            <div class="col-md-1" id="add_bill">
                <button  type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">添加账单</button>
            </div>
        </div>

        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">添加账单</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <ul class="form ratio80 ratio-s100">
                                <li>
                                    <span>账单类型</span>
                                    <div class="model_k">
                                        <select class="line" style="font-size: 10px">
                                            <option @click="bill_type=0">收入</option>
                                            <option value="text1" @click="bill_type=10">支出</option>
                                        </select>
                                    </div>
                                </li>
                                <li>
                                    <span>金额</span>
                                    <div><input type="text" class="active" v-model="money"></div>
                                </li>

                                <li>
                                    <span>备注</span>
                                    <div><input type="text" class="active" v-model="remarks"></div>
                                </li>

                                <li>
                                    <span>分类</span>
                                    <div><input type="text" class="active" v-model="concrete_type"></div>
                                </li>

                                <li>
                                    <span>时间</span>
                                    <div>
                                        <input type="text" id="test1" v-model="time">
                                    </div>
                                </li>
                                <li>
                                    <div @click="!is_add_to_family">
                                        <label>
                                            <input type="checkbox"> 同步到家庭账单？
                                        </label>
                                    </div>
                                </li>

                                <li>
                                    <span>分类列表</span>
                                    <div id="incomeImg" class="model_k" v-if="bill_type===0">
                                        <div class="row">
                                            <div class="col-md-2" @click="concrete_type='工资'">
                                                <span class="glyphicon glyphicon-briefcase" aria-hidden="true">工资</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='兼职'">
                                                <span class="glyphicon glyphicon-link" aria-hidden="true">兼职</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='生活费'">
                                                <span class="glyphicon glyphicon-yen" aria-hidden="true">生活费</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='红包'">
                                                <span class="glyphicon glyphicon-bookmark" aria-hidden="true">红包</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='礼金'">
                                                <span class="glyphicon glyphicon-gif" aria-hidden="true">礼金</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='理财'">
                                                <span class="glyphicon glyphicon-piggy-bank" aria-hidden="true">理财</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-2" @click="concrete_type='奖金'">
                                                <span class="glyphicon glyphicon-fire" aria-hidden="true">奖金</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='退款'">
                                                <span class="glyphicon glyphicon-magnet" aria-hidden="true">退款</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='报销'">
                                                <span class="glyphicon glyphicon-leaf" aria-hidden="true">报销</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='社保'">
                                                <span class="glyphicon glyphicon-queen" aria-hidden="true">社保</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='折现'">
                                                <span class="glyphicon glyphicon-euro" aria-hidden="true">折现</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='其他'">
                                                <span class="glyphicon glyphicon-minus" aria-hidden="true">其他</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="expendImg" class="model_k" v-if="bill_type===10">
                                        <div class="row">
                                            <div class="col-md-2" @click="concrete_type='餐饮'">
                                                <span class="glyphicon glyphicon-cutlery" aria-hidden="true">餐饮</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='购物'">
                                                <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true">购物</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='交通'">
                                                <span class="glyphicon glyphicon-plane" aria-hidden="true">交通</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='运动'">
                                                <span class="glyphicon glyphicon-eye-open" aria-hidden="true">运动</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='娱乐'">
                                                <span class="glyphicon glyphicon-headphones" aria-hidden="true">娱乐</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='通讯'">
                                                <span class="glyphicon glyphicon-phone" aria-hidden="true">通讯</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-2" @click="concrete_type='住房'">
                                                <span class="glyphicon glyphicon-lamp" aria-hidden="true">住房</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='子女'">
                                                <span class="glyphicon glyphicon-baby-formula" aria-hidden="true">子女</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='旅游'">
                                                <span class="glyphicon glyphicon-tree-conifer" aria-hidden="true">旅游</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='学习'">
                                                <span class="glyphicon glyphicon-education" aria-hidden="true">学习</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='人情'">
                                                <span class="glyphicon glyphicon-gift" aria-hidden="true">人情</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='医疗'">
                                                <span class="glyphicon glyphicon-plus" aria-hidden="true">医疗</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-2" @click="concrete_type='日用'">
                                                <span class="glyphicon glyphicon-cloud" aria-hidden="true">日用</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='电影'">
                                                <span class="glyphicon glyphicon-film" aria-hidden="true">电影</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='护肤'">
                                                <span class="glyphicon glyphicon-tint" aria-hidden="true">护肤</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='储蓄'">
                                                <span class="glyphicon glyphicon-wrench" aria-hidden="true">储蓄</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='电子'">
                                                <span class="glyphicon glyphicon-flash" aria-hidden="true">电子</span>
                                            </div>
                                            <div class="col-md-2" @click="concrete_type='其他'">
                                                <span class="glyphicon glyphicon-minus" aria-hidden="true">其他</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>


                            </ul>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn
                        btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal" @click="postBill()">添加</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div v-if="no_data">
        <div class="media left">
            <div class="img"><img src="./static/index/image/img/empty.png" alt="empty" style="width: 90px;height: 90px"></div>
            <div class="content">
                <h4>空账单</h4>
                <p>您还没有记过帐呢, 点击右上角开始记账吧！</p>
            </div>
        </div>

    </div>
    <div id="has_data" v-else>
        <div class="row">
            <div class="col-md-4">
                <div id="vis0">
                </div>
            </div>
            <div class="col-md-4">
                <div id="vis1">
                </div>
            </div>
            <div class="col-md-4">
                <div id="vis2">
                </div>
            </div>
        </div>

        <div id="bill_detail">
            <h2>收入账单</h2>
            <table class="table table-striped">
                <tr>
                    <th class="count">序号</th>
                    <th class="type">收入类型</th>
                    <th class="money">金额</th>
                    <th class="create_time">创建时间</th>
                    <th class="remarks">备注</th>
                </tr>

                <tr class="success" v-for="(bill,index,i) in income_bills">
                    <td class="count">{{index}}</td>

                    <td class="type">{{bill['concrete_type']}}</td>
                    <td class="money">{{bill['money']}}</td>
                    <td class="create_time">{{bill['time']}}</td>
                    <td class="remarks">{{bill['remarks']}}</td>
                </tr>

            </table>
        </div>

        <div id="expend_detail">
            <h2>支出账单</h2>
            <table class="table table-striped">
                <tr>
                    <th class="count">序号</th>
                    <th class="type">支出类型</th>
                    <th class="money">金额</th>
                    <th class="create_time">创建时间</th>
                    <th class="remarks">备注</th>
                </tr>

                <tr class="success" v-for="(bill,index,i) in expend_bills">
                    <td class="count">{{index}}</td>

                    <td class="type">{{bill['concrete_type']}}</td>
                    <td class="money">{{bill['money']}}</td>
                    <td class="create_time">{{bill['time']}}</td>
                    <td class="remarks">{{bill['remarks']}}</td>
                </tr>

            </table>
        </div>
    </div>


</div>
<script src="viewModel/data.js"></script>
</body>
</html>